<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/recommand.css" />
		<style type="text/css">
			*,
			body {
				margin: 0;
				padding: 0;
				border: none;
				text-shadow: none;
			}
			
			.ui-page {
				background: #ffffff;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				$.ajax({
					url: 'data/recommand.json',
					type: 'get',
					dataType: 'json',
					success: function(res) {
						var data = res.result.data;
						for (i in data) {
							//插入左边
							if(i%2 != 0)
							{
								var new_left = '<div class="menu_show" data_id="'+data[i].id+'">'
								+"<img src='"+data[i].albums[0]+"'/>"
								+'<div class="menu_content"><p>'+data[i].title+','+data[i].intro+'</p></div>'
								+"<div class='jiaobu'><div class='pic'><img src='"+data[i].userImg+"'/><span class='leftPic'>"+data[i].userName+"</span></div>"
								+'<div class="pic"><img src="img/menu/collect.png"/><span>'+data[i].collectNum+'</span></div>'
								+'</div>'
								+'</div>';
								$("#left_content").append(new_left);
								$('#left_content>div').off().on("click",function(k){
      								window.location.href='menuDetail.html#'+this.getAttribute("data_id") ;//进入菜谱详情
 				    			});
							}else{
								//插入右边
								var new_right = '<div class="menu_show" data_id="'+data[i].id+'">'
								+"<i style='display:none'>"+data[i].id+"</i>"
								+"<img src='"+data[i].albums[0]+"'/>"
								+'<div class="menu_content"><p>'+data[i].title+','+data[i].intro+'</p></div>'
								+"<div class='jiaobu'><div class='pic'><img src='"+data[i].userImg+"'/><span class='leftPic'>"+data[i].userName+"</span></div>"
								+'<div class="pic"><img src="img/menu/collect.png"/><span>'+data[i].collectNum+'</span></div>'
								+'</div>'
								+'</div>';
								$("#right_content").append(new_right);
								$('#right_content>div').off().on("click",function(){
	 								window.location.href='menuDetail.html#'+this.getAttribute("data_id") ;//进入菜谱详情
 				    			});
							}
						}
					}
				})
			});
		</script>
	</head>

	<body>
		<div data-role="page">
			<!--<div data-role="header" data-position="fixed">
				<div id="top">
					<form class="ui-filterable">
						<input id="myFilter" data-type="search" placeholder="搜索菜谱、食材">
					</form>
				</div>
			</div>-->
			<div data-role="main" class="ui-content">
				<img src="img/menu/ad.png" id="ad" />
				<div id="title">
					<h3>为你推荐</h3>
					<a href="menuType.html" id="menuType" rel="external" data-ajax="false" data-transition="slidedown">菜谱分类</a>
				</div>
				<div id="hua"></div>
				<div id="recommend"><!--从recommand.json拿数据-->
					<div id="left_content">
					</div>
					<div id="right_content">
					</div>
				</div>
			</div>

			<div data-role="footer" data-position="fixed">
				<div data-role="navbar" data-iconpos="top">
					<ul>
						<li><a href="index.html" data-icon="custom" class="menu ui-btn-active ui-state-persist ui-nodisc-icon" rel="external" data-ajax="false" data-transition="slidedown">菜谱</a></li>
						<li><a href="market.html" data-icon="custom" class="market ui-nodisc-icon" rel="external" data-ajax="false" data-transition="slidedown">市集</a></li>
						<li><a href="class.html" data-icon="custom" class="class ui-nodisc-icon" rel="external" data-ajax="false" data-transition="slidedown">课堂</a></li>
						<li><a href="myPage.html" data-icon="custom" class="my ui-nodisc-icon" rel="external" data-ajax="false" data-transition="slidedown">我的</a></li>
					</ul>
				</div>
			</div>

		</div>
	</body>

</html>